import React from "react";
import { getCount } from "../../api/utils";
import { ListWrapper, List, ListItem } from "./style";

function CommendList(props) {
  const { recommendList } = props;

  return (
    <ListWrapper>
      <h1 className="title">人气歌单推荐</h1>
      <List>
        {recommendList.map((item) => (
          <ListItem key={item.id}>
            <img src={item.picUrl + "?param=300x300"} alt="" />
            <div className="decorate"></div>
            <div className="play_count">
              <i className="iconfont play">&#xe885;</i>
              <span className="count">{getCount(item.playCount)}</span>
            </div>
            <p className="desc">{item.name}</p>
          </ListItem>
        ))}
      </List>
    </ListWrapper>
  );
}
export default React.memo(CommendList);
